<template>
  <!-- <div>算法</div> -->
  <div class="follow_bc">
    <div class="tab_two">
      <div
        @click="tabClick(item.id, i)"
        v-for="(item, i) in tabsList"
        :key="i"
        ref="label"
        :class="item.id === groupId ? 'active' : ''"
        class="second_tab"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="bottom_line" v-if="tabsList.length"></div>
  </div>
  <div v-show="groupId === 0">1内容</div>
  <div v-show="groupId === 1">2内容</div>
  <div v-show="groupId === 2">3内容</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({});
let emit = defineEmits([""]);
 
let tabsList = [
  { name: "tab1", id: 0 },
  { name: "tab2", id: 1 },
  { name: "tab3", id: 2 },
];
let groupId = ref(0);
const label = ref(null);
function tabClick(id, i) {
  groupId.value = id;
  let doc = document.getElementsByClassName("bottom_line")[0];
  let left = label.value[i].offsetLeft + "px"; //返回当前元素的相对水平偏移位置的偏移容器
  let width = label.value[i].clientWidth + "px"; //	在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
  doc.style.width = `${width}`;
  doc.style.transform = `translateX(${left})`;
  doc.style.transition = ".3s";
}

onMounted(() => {});
</script>
<style scoped lang="scss">
// tab切换
.follow_bc {
  width: 100%;
  margin-top: 10px;
  position: relative;
  color: #fff;
}
.first_tab {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
  cursor: pointer;
}
.bottom_line {
  width: 93px;
  height: 2px;
  background: linear-gradient(137deg, #ff9696 0%, #e55653 100%);
  box-shadow: 0px 1px 4px 0px rgba(215, 6, 3, 0.19);
  border-radius: 1px;
  border: 0px solid rgba(151, 151, 151, 0);
  position: absolute;
  margin-top: -9px;
  margin-left: 1px;
}
.second_tab {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
  cursor: pointer;
  width: 93px;
  display: flex;
  justify-content: center;
}

.tab_two {
  display: flex;
  padding: 20px 0px;
}
.tab_two div.active {
  color: #333;
  font-size: 20px;
  letter-spacing: 1px;
}
//tab切换
</style>
